﻿<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>TODO List</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script>
        var model = {
            user: "Jerry",
            items: [
                    { "action": "编写方案文档", done: false },
                    { "action": "面试技术人员", done: false },
                    { "action": "向老板汇报", done: true },
                    { "action": "召开部门会议", done: false }]
        };
        var todoApp = angular.module('todoApp', []);

        todoApp.controller("ToDoCtrl", function ($scope) {
            $scope.todo = model;
        });
    </script>
    <style>
        .odd {
            background-color: lightcoral;
        }

        .even {
            background-color: lavenderblush;
        }
    </style>

</head>
<body ng-controller="ToDoCtrl">
    <div class="container">
        <div class="page-header">
            <h1>
                {{todo.user}}的待办事务列表
            </h1>
        </div>
        <div>
            <div class="col-xs-3" ng-repeat="item in todo.items" ng-class="$odd?'odd':'even'">
                <div style="float:left" ng-if="$first">
                    <span class="glyphicon glyphicon-hand-right"></span>
                </div>
                <div style="float:left">
                    <span class="badge">{{$index+1}}</span>
                    <br />
                    {{item.action}}
                    <br />
                    <label class="checkbox-inline">
                        <input type="checkbox" ng-model="item.done" />完成
                    </label>
                </div>
                <div style="float:left" ng-if="$last">
                    <span class="glyphicon glyphicon-hand-left"></span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
